<template>
  <el-dialog :title="title" v-model="dialogVisible" width="480px" :before-close="changeVisible">
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="标题" prop="name">
        <el-input v-model="form.name" placeholder="请输入名称"></el-input>
      </el-form-item>
      <el-form-item label="是否显示" prop="state">
        <el-switch v-model="form.state" :active-value="1" :inactive-value="0"></el-switch>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="danger" v-if="tage.id" @click="onDelete">删 除</el-button>
        <el-button @click="changeVisible">取 消</el-button>
        <el-button type="primary" @click="onSubmit">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";
import { goodsOption } from "@/utils/interface";
@Options({
  props: {
    isVisible: {
      type: Boolean,
      default: false,
    },
    tage: {
      type: Object,
      default: () => {},
    },
  },
  emits: ["update:isVisible", "callBack"],
})
export default class dialogEdit extends Vue {
  [x: string]: any;
  dialogVisible: Boolean = this.isVisible;
  data() {
    return {
      title: "新增模块",
      form: {
        name: "",
        state: 0,
      },
      rules: {
        name: [{ required: true, message: "不能为空", trigger: "blur" }],
      },
    };
  }

  mounted() {
    if (this.tage.id) {
      this.title = "编辑模块标题";
      this.form = {
        id: this.tage.id,
        name: this.tage.name,
        state: this.tage.state,
      };
    }
  }

  // 确定提交
  onSubmit() {
    let el: any = this.$refs["form"];
    el.validate((valid: Boolean) => {
      if (valid) {
        this.API.indexSalesUpdate(this.form).then(() => {
          this.$message.success("操作成功！");
          this.$emit("callBack");
          this.changeVisible();
        });
      }
    });
  }

  // 删除
  onDelete() {
    this.API.indexSalesDelete(this.tage.id).then(() => {
      this.$message.success("操作成功！");
      this.$emit("callBack");
      this.changeVisible();
    });
  }

  changeVisible() {
    this.dialogVisible = this.dialogVisible ? false : true;
    this.$emit("update:isVisible", this.dialogVisible);
  }
}
</script>
